<template>
  <div class="sel-well-box">
    <div class="nav-box">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <span class="breadcrumb-link" @click="toHome">首页</span>
        </a-breadcrumb-item>
        <span slot="separator">
          <a-icon style="color: #acacac;font-size: 12px" type="right" />
        </span>
        <a-breadcrumb-item>{{$store.state.BreadcrumbTitle}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <product-list :list="productsList" v-if="productsList.length > 0"></product-list>
    <div class="Pagination">
      <a-pagination v-model="current" :total="total"  :page-size="pageSize" show-less-items @change="onChangePage"  />
    </div>
  </div>
</template>

<script>
import ProductList from '@/components/common'
import api from '@/api/moreSellWell/api'
export default {
  name: 'sellwell',
  data () {
    return {
      current: 1,
      total: null,
      pageSize: 20,
      productsList: []
    }
  },
  components: {
    ProductList
  },
  mounted () {
    this.getSellWellList()
  },
  methods: {
    onChangePage (current) {
      this.current = current
      this.getSellWellList()
    },
    getSellWellList () {
      const params = {
        module: 'app_pc',
        action: 'index',
        m: 'load_home',
        access_id: localStorage.getItem('token'),
        s_type: this.$store.state.BreadcrumbTitle === '热销' ? 2 : 1,
        page: this.current,
        language: null
      }
      api.getSellWellList(params).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data.total
          this.productsList = res.data.data.list
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.error(err)
      })
    },
    toHome () {
      this.$store.commit('changePage', 'HomeList')
    }
  }
}
</script>

<style scoped lang="scss">
.sel-well-box {
  width: 1310px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: 15px;
  /*background-color: #a2ff35;*/
  .nav-box {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding-top: 15px;
    /*background-color: #62ffe1;*/
    .breadcrumb-link {
      color: #303133;
      font-weight: bold;
      cursor: pointer;
      font-family: "Microsoft YaHei";
    }
  }
  .Pagination {
    width: 100%;
    text-align: center;
    margin: 15px auto;
  }
}
</style>
